<template>
	<view class="address">
		<navBar title="地址管理"></navBar>
		<uni-swipe-action class="address-bd">
			<!-- <uni-swipe-action-item :right-options="options" @click="choseOrderAddress(item)" -->
			<uni-swipe-action-item v-for="item in list" :key="item.id" :right-options="options"
				@click="(event)=>operate(event, item)">
				<view class="item" @click.stop="addressEdit(item)">
					<view>
						<view class="top">
							<view class="default" v-if="item.city_id">默认</view>
							{{item.city}}
						</view>
						<view class="detail">{{item.city_details}}</view>
						<view class="user-info">
							{{item.name}} {{item.mobile}}
						</view>
					</view>
					<view class="open-icon" @click.stop="edit(item)">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="address-add" @click.stop="addressAdd">
			<u-icon name="plus"></u-icon>
			<text>新建收货地址</text>
		</view>
		<u-modal v-model="showDelete" @confirm="deleteAddress" title="删除地址" :show-cancel-button="true"
			confirm-color="#CB712B">
			<view class="delete-content">确认删除此地址吗?</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		address,
		addressDelete
	} from "@/utils/api";
	import {
		mapActions
	} from "vuex";
	import uniSwiperActionItem from '@/uni_modules/uni-swipe-action/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import uniSwiperAction from '@/uni_modules/uni-swipe-action/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		data() {
			return {
				list: [],
				options: [{
					text: '设为默认',
					style: {
						color: "#333333",
						fontSize: "26rpx",
						backgroundColor: '#F5F6F7'
					}
				}, {
					text: '删除',
					style: {
						color: "#FFF",
						fontSize: "26rpx",
						backgroundColor: '#CB712B'
					}
				}],
				showDelete: false,
				selectAddress: null,
				// 1-正常打开 2-选择模式
				openType: 1
			};
		},
		onLoad(opt) {
			this.openType = opt.openType || 1
		},
		onShow() {
			this.addressInit();
		},
		components: {
			uniSwiperAction,
			uniSwiperActionItem
		},
		methods: {
			...mapActions(["recordEditAddress", "setOrderAddress"]),
			// 添加地址
			addressAdd() {
				uni.navigateTo({
					url: "/pages/common/address/subs/addressEdit/addressEdit?type=add&id=-1",
				});
			},
			// 编辑地址
			addressEdit(obj) {
				if (this.openType == 2) {
					// 选中后返回
					this.choseOrderAddress(obj)
				} else {
					this.recordEditAddress(obj).then(() => {
						uni.navigateTo({
							url: "/pages/common/address/subs/addressEdit/addressEdit?type=edit&id=" +
								obj.id,
						});
					});
				}
			},
			edit(item) {
				this.recordEditAddress(item).then(() => {
					uni.navigateTo({
						url: "/pages/common/address/subs/addressEdit/addressEdit?type=edit&id=" +
							item.id,
					});
				});
			},
			operate(event, item) {
				const {
					index
				} = event;
				switch (index) {
					case 1:
						this.openDelete(item)
						break;
					case 0:
						this.setDefault(item)
				}
			},
			openDelete(item) {
				this.showDelete = true
				this.selectAddress = item
			},
			async setDefault(item) {
				await address({
					...item,
					city_id: 1
				})
				this.addressInit()
			},
			async deleteAddress() {
				if (!this.selectAddress) return
				await addressDelete({
					id: this.selectAddress.id
				})
				this.$utils.success("删除成功")
				this.addressInit()
			},
			// 选择下单地址
			choseOrderAddress(item) {
				let pages = getCurrentPages();
				let preRoute = pages[pages.length - 2].route;
				if (preRoute == "pages/orderConfirm/orderConfirm") {
					this.setOrderAddress(item).then(() => {
						this.$Router.back(1)
					});
				}
			},
			addressInit() {
				var that = this;
				var first;
				address().then((resp) => {
					console.log("地址列表", resp);
					const {
						data
					} = resp;
					for (let i = 0; i < data.length; i++) {
						if (data[i].city_id) {
							first = data[i];
							data.splice(i, 1);
						}
					}
					that.list = first ? [first, ...data] : [...data];
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.address {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0;

		&-bd {
			.item {
				@extend .flex-btw;
				font-size: 26rpx;
				color: #333;
				padding: 30rpx;
				border-bottom: 1px solid #EEEFF0;

				.top {
					display: flex;
					align-items: center;

					.default {
						font-size: 20rpx;
						background-color: $primary-color;
						color: #FFF;
						padding: 2rpx 10rpx;
						margin-right: 10rpx;
						border-radius: 5rpx;
					}
				}

				.detail {
					margin: 32rpx 0 22rpx 0;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

		&-add {
			border-radius: 16rpx;
			font-size: 30rpx;
			padding: 18rpx;
			position: fixed;
			color: #FFF;
			border-radius: 50rpx;
			width: 680rpx;
			text-align: center;
			font-size: 28rpx;
			background: linear-gradient(to right, #FFBC67, #FC602B);
			bottom: 92rpx;
			width: 680rpx;
			left: 35rpx;
		}
	}

	.delete-content {
		font-size: 26rpx;
		text-align: center;
		margin: 25rpx 0;
	}

	.open-icon {
		height: 100rpx;
		width: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>
